<script setup>
import {useRoute} from 'vue-router'
import { getCurrentInstance,ref,reactive} from "vue"
const {proxy} = getCurrentInstance()
const route = useRoute()
const loading = ref(true)
const imgurl = ref(route.query.imgurl)
const mvDetail = reactive({
    value:{name:"",}
})
const options=reactive({
    value:{
      width: '600px', //播放器高度
      height: '350px', //播放器高度
      color: "#409eff", //主题色
      title: 'tumiMusic', //视频名称
      src:sessionStorage.getItem("mvUrl"), //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: true, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false,  //关灯模式
      volume: 1, //默认音量大小
      control: true, //是否显示控制
      poster:imgurl,
      controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
    }
})
proxy.$https.getMvDetail(route.params.id)
.then(res=>{
    loading.value=false
    mvDetail.value = res.data.data
    })
</script>

<template>
<el-skeleton width="600px"  :loading="loading" animated>
      <template #template>
        <el-skeleton-item  style="width: 600px; height: 350px" />
      </template>
      <template #default>
       <h1>
            <span>{{ mvDetail.value.name  }}</span> 
        </h1>
        <div>
            <vue3VideoPlay v-bind="options.value" :poster="options.value.poster"/>
        </div>
        <div class="block">
            <el-avatar :size="55" :src="mvDetail.value.artists[0].img1v1Url" />
            <span class="span">{{ mvDetail.value.artistName }}</span>
        </div>
      </template>
    </el-skeleton>

</template>

<style scoped>
h1{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}
div{
    display: flex;
}

.block{
    margin-top: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.span{
    margin-left: 15px;
}



</style>